<template>
	<view class="container">
		<view class="card">
			<text class="title">用户注册</text>

			<view class="input-item">
				<input type="text" placeholder="请设置用户名" v-model="username" class="input" />
			</view>

			<view class="input-item">
				<input type="password" placeholder="请设置密码" v-model="password" class="input" />
			</view>

			<view class="input-item">
				<input type="password" placeholder="请确认密码" v-model="confirmPwd" class="input" />
			</view>

			<button class="submit-btn" @click="handleRegister" hover-class="btn-hover">
				注册
			</button>

			<navigator url="/pages/login/login" class="link">
				已有账号？去登录
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				confirmPwd: ''
			}
		},
		methods: {
			handleRegister() {
				if (!this.username || !this.password || !this.confirmPwd) {
					uni.showToast({ title: '请完善注册信息', icon: 'none' })
					return
				}
				if (this.password !== this.confirmPwd) {
					uni.showToast({ title: '两次密码不一致', icon: 'none' })
					return
				}
				
				uniCloud.callFunction({
					name:'addUser',
					data:{
						'name':this.username,
						'password':this.password
					},
					success:(msg) => {
						console.log("addUser callback"+JSON.stringify((msg)));
						setTimeout(()=>{
							uni.hideLoading()
							uni.showToast({
								title:'注册成功'
							})
							uni.navigateBack();
						},1000)
					},
					fail:(errer) =>{
						console.error("addUser fail" + errer);
					}
				})

				const users = uni.getStorageSync('registeredUsers') || []
				const isExist = users.some(user => user.username === this.username)
				if (isExist) {
					uni.showToast({ title: '用户名已存在', icon: 'none' })
					return
				}

				users.push({ username: this.username, password: this.password })
				uni.setStorageSync('registeredUsers', users)

				uni.setStorageSync('token', 'user_token_' + this.username)
				uni.setStorageSync('username', this.username)

				setTimeout(() => {
					uni.showToast({ title: '注册成功，已自动登录', icon: 'success' })
					uni.switchTab({ url: '/pages/tabBar/tabcompage/tabcompage' })
				}, 1000)
			}
		}
	}
</script>

<style scoped>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 20rpx;
	}

	.card {
		width: 100%;
		max-width: 500rpx;
		background-color: #fff;
		padding: 60rpx 40rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.title {
		display: block;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 60rpx;
	}

	.input-item {
		margin-bottom: 22rpx;
	}

	.input {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		border: 2rpx solid #eee;
		border-radius: 8rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.submit-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #007aff;
		color: #fff;
		font-size: 32rpx;
		border-radius: 8rpx;
		margin: 32rpx 0 20rpx;
	}

	.btn-hover {
		background-color: #0062d9;
	}

	.link {
		display: block;
		text-align: center;
		font-size: 28rpx;
		color: #007aff;
		margin-top: 20rpx;
	}
</style>